<template>
  <div class="investigate">
    <!-- 内容 -->
    <div class="title">{{ datas.title }}</div>

    <van-cell-group inset>
      <van-field
          v-for="(item1, index1) in datas.jsonData"
          :key="index1"
          :label="item1.name"
          :placeholder="item1.value"
          v-model="item1.value2"
          clearable
          :readonly="item1.type === 1"
          :is-link="item1.type === 1"
          arrow-direction="down"
          @click="handleShowPopper(index1)"
      >
<!--        <template #input v-if="item1.type === 2">-->
<!--          <van-radio-group v-model="item1.value2">-->
<!--            <van-radio-->
<!--                :name="radioItem"-->
<!--                :key="'radio-' + index1 + '-' + radioIndex"-->
<!--                v-for="(radioItem, radioIndex) in item1.value1"-->
<!--            >-->
<!--              {{ radioItem }}-->
<!--            </van-radio>-->
<!--          </van-radio-group>-->
<!--        </template>-->

      </van-field>
    </van-cell-group>
    <div style="height: 10px"></div>
    <van-button round size="large" type="primary"> 提交</van-button>

    <div v-for="(item1, index1) in datas.jsonData">
      <van-popup v-if="item1.type == 1" v-model="item1.showPicker" round position="bottom">
        <van-picker
            ref="picker"
            :key="index1"
            :title="item1.name"
            show-toolbar
            :columns="item1.value1"
            @cancel="item1.showPicker = false"
            @confirm="onPopupConfirm"
        />
      </van-popup>
    </div>
    <!-- 删除组件 -->
    <slot name="deles"/>
  </div>
</template>

<script>
export default {
  name: 'investigate',
  data() {
    return {
      radio: '2',
      jsonData: [],
      currentFieldIndex: 0
    }
  },
  props: {
    datas: Object,
  },
  created() {

  },
  mounted() {
  },
  methods: {
    handleShowPopper(index) {
      this.currentFieldIndex = index;
      if (this.datas.jsonData[index].type === 1) {
        this.datas.jsonData[index].showPicker = true;
      }
    },
    onPopupConfirm(value) {
      console.info(value == "请选择");
      if (value == "请选择") {
        this.datas.jsonData[this.currentFieldIndex].value2 = null;
      } else {
        this.datas.jsonData[this.currentFieldIndex].value2 = value;
      }
      this.datas.jsonData[this.currentFieldIndex].showPicker = false;
    },

    //
  },
  watch: {},
}
</script>

<style scoped lang="less">
.investigate {
  position: relative;
  padding: 10px 6px;
}

.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}


</style>
